<template>
  <div id="app">
    <div class="app-container">
      <Layout>
        <template #left>
          <div class="left">
            <Menu></Menu>
          </div>
        </template>

        <template #main>
          <div class="main">
            <!-- <Empty></Empty> -->
             <!-- <keep-alive :include="cachedComp"> -->
               <router-view></router-view>
             <!-- </keep-alive> -->
          </div>
        </template>

      </Layout>
    </div>
  </div>
</template>

<script>
import Layout from '@/components/Layout'
import Menu from '@/components/Menu'
import Empty from '@/components/Empty'
export default {
  name: 'App',
  components: {
    Layout,
    Menu,
    Empty
  },
  data() {
    return {
      cachedComp: [
        'home'
      ]
    }
  },
  methods: {
  },
  computed: {
  },
  mounted() {
    // document.body.clientTop
    // document.body.style.zoom = "67%"
  }
}
</script>

<style scoped lang="less">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
//   margin-top: 60px;
// }
@import "~@/styles/mixin.less";
@import "~@/styles/global.less";

.app-container {
  width: 100vw;
  height: 100vh;
  .self-fill(fixed);
  .left {
    width: 15vw;
    height: 100%;
  }
  .main {
    width: 100%;
    height: 100%;
    .grandient(); // 主体背景颜色
  }
}
</style>
